import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';

// 基准屏幕宽度，用于 rpx 转换
const BASE_SCREEN_WIDTH = 750;

// rpx 转换函数
function rpxToPx(rpx: number) {
  return (rpx / BASE_SCREEN_WIDTH) * 100 + 'vw';
}

// rpx 转换插件
function rpxTransform() {
  return {
    name: 'rpx-transform',
    transform(code: string) {
      // 匹配 rpx 单位
      return code.replace(/(\d+)rpx/g, (_, value) => {
        return rpxToPx(Number(value));
      });
    }
  };
}

// https://vitejs.dev/config/
export default defineConfig(() => {
  return {
    plugins: [
      react(),
      rpxTransform()
    ],
    server: {
      port: 5173,
      host: true,
      strictPort: true
    },
    build: {
      rollupOptions: {
        output: {
          manualChunks: {
            // 将 React 相关库打包在一起
            'vendor-react': ['react', 'react-dom'],
            // 将动画相关库打包在一起
            'vendor-animation': ['framer-motion'],
            // 将 UI 组件库打包在一起
            'vendor-ui': ['antd'],
            // 将工具库打包在一起
            'vendor-utils': ['html2canvas'],
          },
          // 自定义 chunk 文件名
          chunkFileNames: 'assets/[name]-[hash].js',
          // 自定义入口文件名
          entryFileNames: 'assets/[name]-[hash].js',
          // 自定义资源文件名
          assetFileNames: 'assets/[name]-[hash].[ext]',
        }
      },
      // 启用 CSS 代码分割
      cssCodeSplit: true,
      // 启用源码映射
      sourcemap: true,
      // 设置 chunk 大小警告阈值
      chunkSizeWarningLimit: 1000,
    },
    optimizeDeps: {
      include: ['react', 'react-dom', 'framer-motion', 'antd', 'html2canvas'],
    },
  };
}); 